<template>
  <div class="goodsinfo">
    <!-- 轮播图 首页也有，所以抽离为公共组件-->
    <div class="mui-card">
      <swiper :imglist="imglist"></swiper>
    </div>
    <!-- 详细内容：使用mui的cardview卡片视图 -->
    <!-- 第一个卡片：只有头和身体 -->
    <div class="mui-card card1">
      <div class="mui-card-header">{{goodsinfo.title}}</div>
      <div class="mui-card-content">
        <span>
          市场价：
          <del>￥{{goodsinfo.market_price}}</del>
        </span>
        <span>
          销售价：
          <i>￥{{goodsinfo.sell_price}}</i>
        </span>
        <p>购买数量：
          <!-- 购买数量这个抽离为公共组件，使用mui中 -->
          <!-- bug:因为父传子的变量是后台ajax请求到的，且是异步请求，所以第一次传过去的值是undefined -->
          <!-- 接收子组件传过来的用户选择的商品数量  bug:goodsCount不加括号，如果需要传递参数加括号并传递实参 -->
          <count :max="goodsinfo.stock_quantity" @getCount="goodsCount"></count>
        </p>
      </div>
      <div class="mui-card-footer">
        <mt-button type="primary" size="small">立即购买</mt-button>
        <!-- 点击加入购物车，使flag为true，开启小球动画 -->
        <mt-button type="danger" size="small" @click="addcar">加入购物车{{userCount}}</mt-button>
      </div>
    </div>
    <!-- 第二个卡片 -->
    <div class="mui-card card2">
      <div class="mui-card-header">商品参数</div>
      <div class="mui-card-content">
        <p>商品货号：{{goodsinfo.goods_no}}</p>
        <p>库存情况：{{goodsinfo.stock_quantity}}</p>
        <p>上架时间：{{goodsinfo.add_time}}</p>
      </div>
      <div class="mui-card-footer">
        <!-- 采用编程式导航 -->
        <mt-button type="primary" size="large" plain @click="tuwen">图文介绍</mt-button>
        <mt-button type="danger" size="large" plain @click="com">商品评论</mt-button>
      </div>
    </div>
    <!-- 小球动画:使用钩子函数实现半场动画 -->
    <transition @before-enter="b_enter" @enter="enter" @after-enter="a_enter">
      <div v-show="flag" class="ball"></div>
    </transition>
  </div>
</template>
<script>
// 引入公共组件轮播图
import swiper from "../pubcom/swiper.vue";
// 引入公共组件购买数量
import count from "../pubcom/count.vue";
export default {
  data() {
    return {
      id: this.$route.params.id,
      imglist: [],
      goodsinfo: {},
      flag: false,
      userCount: 1 //子组件传过来的用户选择商品的数量
    };
  },
  components: {
    swiper,
    count
  },
  created() {
    this.getGoodsimg();
    this.getGoodsInfo();
  },
  methods: {
    // 后台获取轮播图数据
    getGoodsimg() {
      this.$http.get("api/getthumimages/" + this.id).then(res => {
        // console.log(res.body.message);
        this.imglist = res.body.message;
      });
    },
    // 后台获取商品详情信息
    getGoodsInfo() {
      this.$http.get("api/goods/getinfo/" + this.id).then(res => {
        // console.log(res.body.message);
        this.goodsinfo = res.body.message[0];
      });
    },
    // 采用编程式导航，跳转到图文列表页和评论页
    tuwen() {
      this.$router.push("/tuwen/" + this.id);
    },
    com() {
      this.$router.push("/com/" + this.id);
    },
    // 小球半场动画
    b_enter(el) {
      el.style.transform = "translate(0, 0)";
    },
    enter(el, done) {
      el.offsetWidth;
      // bug:移动的最终位置偏移量需要动态获取，因为手机宽度不一样，且页面上下滚动时，相对位置发生改变
      // 解决方法：动态获取购物车和小球的横纵坐标，其差值就是偏移的距离
      // 原生js中的方法getBoundingClientRect()可以获取当前DOM元素距离窗口上下左右四个距离
      // bug:ref只能获取当前组件中的DOM元素，底部购物车的图标可以使用id获取
      let car = document.getElementById("car");
      let x = parseInt(
        car.getBoundingClientRect().left - el.getBoundingClientRect().left
      );
      let y = parseInt(
        car.getBoundingClientRect().top - el.getBoundingClientRect().top
      );
      el.style.transform = `translate(${x}px, ${y}px)`;
      el.style.transition = "all 1s cubic-bezier(0.68, -0.55, 0.27, 1.50)";
      done();
    },
    a_enter() {
      this.flag = false;
    },
    // 父组件商品信息页获取到数据后，需要将商品信息全部传给购物车页面
    // 这就涉及到兄弟组件的传值，使用vuex
    // 点击加入购物车
    addcar() {
      this.flag = true; //控制小球显示隐藏
      // 点击加入购物车实现思路
      // 1、如果你想把商品信息存到vuex的store中，首先在state中定义一个空数组，用来存储
      // 2、然后当你点击加入购物车的时候，需要更新这个state中的数组，则需要调用mutations中的方法，来操作数组，
      // 可以先定义一个操作数组的逻辑方法，然后在点击事件里调用这个方法，把新的商品信息以实参的形式传递给这个方法
      // 做法：点击加入购物车时拼接一个对象，包含添加商品的所有信息，调用mutations中updata方法，将对象作为实参传递过去，更新数组
      let addgoods = {
        id: this.id,
        count: this.userCount,
        price: this.goodsinfo.sell_price,
        selected: true
      };
      console.log(addgoods);

      this.$store.commit("updateCar", addgoods);
    },
    // 当用户选择好购买商品的件数时，将件数传给父组件
    goodsCount(data) {
      this.userCount = data;
    }
  }
};
</script>
<style lang="less" >
.goodsinfo {
  position: relative;
  .card1 {
    .mui-card-content {
      padding: 15px;
      span {
        color: #aaa;
        margin-right: 10px;
        i {
          color: red;
          font-style: normal;
          font-size: 18px;
          font-weight: 700;
        }
      }
      p {
        margin-top: 15px;
        display: flex;
        // 让文字往下移：设置line-height
        line-height: 2.5;
      }
    }
    .mui-card-footer {
      display: block;
      button {
        margin-right: 5px;
      }
    }
  }
  .card2 {
    .mui-card-content {
      padding: 15px;
    }
    .mui-card-footer {
      display: block;
      button {
        margin-bottom: 10px;
      }
    }
  }
  // 小球要相对于最外层容器定位，子绝父相，不然相对浏览器定位就会变化
  .ball {
    width: 15px;
    height: 15px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    z-index: 99;
    left: 148px;
    top: 315px;
  }
}
</style>